<script setup lang="ts">
  import { reactive, ref, onMounted } from "vue";
  import { useRenderIcon } from "@/components/ReIcon/src/hooks";
  import Delete from "@iconify-icons/ep/delete";
  import EditPen from "@iconify-icons/ep/edit-pen";
  import { useRoute, useRouter } from "vue-router";
  import {insertAppDeploymentRequest, updateApplicationInfo} from "@/api/system";
  import { toRaw } from "vue";
  import {ElMessage} from "element-plus";
  import {useUserStoreHook} from "@/store/modules/user";
  import {useApplication} from "@/views/application/applicationList/utils/hook";
  import {any} from "vue-types";
  const route = useRoute();
  const router = useRouter();
  let rowData = ref({});
  let formRef = ref(null);
  let dialogTree = ref(false)
  let roleOptions = ref([]);
  let loading = ref(false);
  let tableData = ref([]);
  let formVisible = ref(false);
  let formTitle = ref("新增");
  let title = "";

  const props = defineProps({
    onSearch: {
      type: Function,
      default: null
    }
  });

  const nickname = ref(useUserStoreHook()?.nickname);

  let row = ref({
    applicationId: "",
    title: "",
    status: '',
    applicationCode: "",
    applicationName: '',
    applicationDescription: "",
    developmentTeam: '',
    versionNumber: "",
    createTime: '',
    updateTime: "",
    createBy: '',
    updateBy: "",
    page: "1",
    pageSize: "10",
    statusName: "",
  });
  let form = reactive({
    applicationId: "",
    applicationCode: "",
    applicationName: "",
    status: "",
    applicationDescription: "",
    developmentTeam: "",
    versionNumber: "1.0",
    plannedDeploymentTime: "",
    type:"2",
    day: "",
    influence: "",
    dataDisposalPlan: "",
    createBy: "",
    updateBy: "",
    reason: "",
  });

  const cancelApplyRule = {
    plannedDeploymentTime: [{ required: true, message: "请选择日期", trigger: "blur" }],
    reason: [{ required: true, message: "请输入注销原因", trigger: "blur" }],
    dataDisposalPlan: [{ required: true, message: "请输入处置计划", trigger: "blur" }],
    influence: [{ required: true, message: "请输入影响评估", trigger: "blur" }],
  };

  function fillForm(row) {
    form.applicationId = row.applicationId
    form.applicationCode = row.applicationCode
    form.applicationName = row.applicationName
    form.applicationDescription = row.applicationDescription
    form.developmentTeam = row.developmentTeam
    form.versionNumber = row.versionNumber
    form.reason = ""
    form.plannedDeploymentTime = ""
    form.dataDisposalPlan = ""
    form.influence = ""
  }

  //提交
  const applySubmit = async () => {
    await formRef.value?.validate().catch(err => {
      ElMessage.error("必填项不能为空")
      throw err
    })
    form.status = "0"
    form.type = "2"
    form.createBy = nickname.value
    form.updateBy = nickname.value
    form.day = form.plannedDeploymentTime.toString()
    form.plannedDeploymentTime = ""
    await insertAppDeploymentRequest(toRaw(form)).then(res=>{
      if(res.code==500){
        ElMessage.error("应用注销申请失败!")
      }else{
        ElMessage.success("应用注销申请成功!")
        dialogTree.value = false
      }
    });
    await updateApplicationInfo(toRaw(form)).then(res=>{
      if(res.code==500){
        ElMessage.error("更新应用状态失败!")
      }else{
        ElMessage.success("更新应用状态成功!")
        dialogTree.value = false
      }
    });
    props.onSearch();

    setTimeout(() => {
      loading.value = false;
    }, 500);
  };
  //取消
  const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    dialogTree.value = false
  };

  defineExpose({
    dialogTree,
    fillForm,
  });
</script>
<template>
  <el-dialog title="" v-model="dialogTree" width="40%" style="min-height:400px;">
    <el-form ref="formRef" :inline="false" :model="form" :label-width="250"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto" :rules="cancelApplyRule">
      <h1 style="margin: 10px 0 20px">应用注销申请</h1>
      <el-form-item label="应用名称：" prop="applicationName" v-show="false">
        应用名称
      </el-form-item>
      <el-form-item label="应用描述：" prop="title" v-show="false">
        {{row.applicationDescription}}
        应用描述
      </el-form-item>
      <el-form-item label="开发团队：" prop="title" v-show="false">
        开发团队
      </el-form-item>
      <el-form-item label="应用版本号：" prop="title" v-show="false">
        应用版本号
      </el-form-item>
      <el-form-item label="注销原因：" prop="reason">
        <el-input v-model="form.reason" placeholder="请输入注销原因" clearable class="!w-[360px]" />
      </el-form-item>
      <el-form-item label="预计注销时间：" prop="plannedDeploymentTime">
        <el-date-picker v-model="form.plannedDeploymentTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="处置计划：" prop="dataDisposalPlan">
        <el-input v-model="form.dataDisposalPlan" placeholder="请输入处置计划" clearable class="!w-[360px]" />
      </el-form-item>
      <el-form-item label="影响评估：" prop="influence">
        <el-input v-model="form.influence" placeholder="请输入影响评估" clearable class="!w-[360px]" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="applySubmit">
          提交
        </el-button>
        <el-button @click="resetForm(formRef)"> 取消 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
